<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>memberList</title>
    <link rel="icon" th:href="@{/images/logo.png}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{css/layuimini.css}" media="all">
    <link rel="stylesheet" th:href="@{css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
</head>
<style>
    .div-content {
        height: 220px;
        background-color: white;
        border-radius: 7px;
        padding: 7px;
    }
    .table-search-fieldset{
        margin: 0;
        border: 1px solid #e6e6e6;
        padding:10px 20px 5px 20px;
        color: #6b6b6b;
    }
</style>
<body>
<div class="div-content">
    <form class="layui-form layui-form-pane" id="form-search">
        <fieldset class="table-search-fieldset">
                        <legend>搜索条件</legend>
                        <div class="layui-form-item">

                            <div class="layui-inline">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-inline" style="width: 180px;">
                                    <input type="text" name="name" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">办卡时间</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <input type="text" id="startDate" name="startDate" placeholder="开始日期" autocomplete="off"
                                   class="layui-input date" >
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" id="endDate" name="endDate" placeholder="结束日期" autocomplete="off"
                               class="layui-input date">
                    </div>
                </div>
                <div class="layui-inline">
                    <button  id="btn-search" lay-submit lay-filter="btn-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-normal">
                        <i class="layui-icon layui-icon-search"></i>
                        搜索
                    </button>
                    <button id="btn-reset" type="reset" class="layui-btn layui-btn-radius layui-btn-primary">
                        <i class="layui-icon layui-icon-fonts-clear"></i>
                        清空条件
                    </button>
                </div>

            </div>
        </fieldset>
    </form>
    <table id="table-member" lay-filter="table-member-filter"></table>
</div>
<script type="text/html" id="table-member-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
    </div>
</script>
<!--表格内按钮-->
<script type="text/html" id="col-member-toolbar">
    <a  class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit" >编辑</a>
    <a  class="layui-btn layui-btn-xs" lay-event="del"  >删除</a>

</script>
<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/lib/jq-module/jquery.particleground.min.js}" charset="utf-8"></script>
<script th:inline="javascript">
    
    function refreshTable() {
        $("#btn-reset").click()
        $("#btn-search").click();
    }
    
    var ctxPath= [[@{/}]];
        //日期设置
        layui.use(['laydate', 'table','form'] , function () {
            var laydate = layui.laydate;
            var table = layui.table;
            var form = layui.form;


            //表格头部工具栏监听
            table.on('toolbar(table-member-filter)', function(obj){
              if (obj.event == 'add'){
                  layer.open({
                      type: 2,
                      title:'新增会员',
                      area:['90%','90%'],
                      content:ctxPath+'member/add/ui'
                  });
              }else if(obj.event=='delete'){
                  var checkStatus = table.checkStatus('table-member'); //idTest 即为基础参数 id 对应的值
                  //如果没有选中任何数据
                  if(checkStatus.data.length==0){
                      layer.alert("请至少选择一个", {icon: 7,title:"警告"});
                      return false;
                  }
                  //选中的账号
                  var accountArr= new Array();
                  $(checkStatus.data).each(function () {
                      accountArr.push(this.memberAccount);
                  });
                  layer.confirm('是否确定删除该记录?', {icon: 3, title:'确认删除'}, function(index){
                      //异步请求删除 结果提示 刷新表格
                      var url=ctxPath + "member/"+accountArr.join(",");
                      var params ={
                          _method:"DELETE"
                      }
                      $.post(url,params,function(response){
                          if(response.code==0){
                              layer.msg(response.message,{icon:1});
                              refreshTable();
                          }else {
                              layer.alert(response.message,{icon:2,anim:6});
                          }
                      })
                      layer.close(index);
                  });
              }

            });


            //执行一个laydate实例
            laydate.render({
                elem: '.date' //指定元素
            });


            //员工列表表格渲染
            table.render({
                elem: '#table-member'
                , url: '/member/list' //数据接口
                , page: true //开启分页
                ,toolbar:"#table-member-toolbar"
                , limits: [5, 10, 20, 30, 50]

                , cols: [
                    [ //表头
                        {type:"checkbox" ,width:60 },
                        {field: 'memberAccount', title: '会员账号/卡号', width: 130, sort: true,align:'center'}
                        , {field: 'name', title: '姓名', width: 110,sort: true,align:'center'}
                        , {field: 'memberGender', title: '性别', width: 110, sort: true,align:'center'}
                        , {field: 'memberAge', title: '年龄', width: 110,sort: true,align:'center'}
                        , {field: 'memberHeight', title: '身高', width: 110,sort: true,align:'center'}
                        , {field: 'memberWeight', title: '体重', width: 110, sort: true,align:'center'}
                        , {field: 'memberPhone', title: '电话', width:  200, sort: true,align:'center'}
                        , {field: 'cardTime', title: '办卡时间', width:  150,sort: true,align:'center'}
                        , {field: 'cardClass', title: '购买课时', width: 150, sort: true,align:'center'}
                        , {field: 'cardNextClass', title: '剩余课时', width: 150, sort: true,align:'center'}
                        , {field: 'cardType', title: '卡类型', width: 120, sort: true,align:'center'}
                        , { title: '操作', toolbar:'#col-member-toolbar'}
                    ]
                ]
            });
            //监听表单提交
            form.on('submit(btn-search-filter)', function(data){
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                //刷新表格
                table.reload('table-member', {
                    where: { //设定异步数据接口的额外参数，任意设
                        name:data.field.name,
                        startDate:data.field.startDate,
                        endDate:data.field.endDate
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                }); //只重载数据
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            //监听操作列
            //表格内的 删除更新 事件
            table.on('tool(table-member-filter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent == 'del'){ //删除
                    layer.confirm('是否确定删除该记录?', {icon: 3, title:'确认删除'}, function(index){
                        //异步请求删除 结果提示 刷新表格
                        var url=ctxPath + "member/"+data.memberAccount
                        var params ={
                            _method:"DELETE"
                        }
                        $.post(url,params,function(response){
                            if(response.code==0){
                                layer.msg(response.message,{icon:1});
                                refreshTable();
                            }else {
                                layer.alert(response.message,{icon:2,anim:6});
                            }
                        })
                        layer.close(index);
                    });

                } else if(layEvent == 'edit'){ //编辑
                    layer.open({
                        type: 2,
                        title:'修改用户',
                        area:['90%','90%'],
                        content:'member/'+data.memberAccount //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    });

                }
            });

        });
</script>
</body>
</html>